<template>
  <div>
    <div>
      <p class="tips" style="color: red;">已购卡用户请输入卡号密码进行绑定，获取VIP权限</p>
			<p class="tips" style="color: red;">温馨提示：信息绑定后则不可修改，请务必认真填写</p>
    </div>
    <el-form class="modify-form" ref="registersForm" :model="form" :rules="rules" size="medium" label-width="100px">
      <el-form-item label="卡号：" prop="cardCode">
        <el-input v-model="form.cardCode" placeholder="非必填项, 无卡用户可忽略" style="width: 244px;" clearable></el-input>
      </el-form-item>
      <el-form-item label="初始密码：" prop="codepwd">
        <el-input v-model="form.codepwd" style="width: 244px;" clearable></el-input>
      </el-form-item>
      <el-form-item label="姓名：" prop="nickName">
        <el-input v-model="form.nickName" style="width: 244px;" clearable></el-input>
      </el-form-item>
      <el-form-item label="就读学校：" prop="school">
        <el-input v-model="form.school" style="width: 244px;" clearable></el-input>
      </el-form-item>
      <el-form-item label="科类：" prop="majorType">
        <el-select v-model="form.majorType" style="width: 244px;" placeholder="请选择">
          <el-option label="文科" :value="2"></el-option>
          <el-option label="理科" :value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="高考年份：" prop="year">
        <el-date-picker v-model="form.year" type="year" style="width: 244px;" placeholder="选择年">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="手机号：" prop="phone">
        <el-input v-model="form.phone" style="width: 244px;" clearable></el-input>
      </el-form-item>
      <el-form-item label="验证码：" prop="code">
        <el-input v-model="form.code" style="width: 244px;" clearable></el-input>
        <el-button v-show="!countDown" style="color: var(--primaryColor);border: none;" @click="getSMSCodeByPhone">
          获取验证码
        </el-button>
        <el-button v-show="countDown" style="color: var(--primaryColor);border: none;">
          {{ countDown }}s
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :submitLoading="submitLoading" @click="submitForm()" class="modify-button">
          注册
        </el-button>
        <el-button type="primary" @click="gologin()" class="modify-button">
          去登录
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { request } from "@/util/request.js"

export default {
  inheritAttrs: false,
  components: {},
  props: {},
  data() {
    return {
      countDown: '', // 验证码倒计时
      form: {
        id: undefined,
        nickName: undefined,
        cardCode: undefined,
        codepwd: undefined,
        school: undefined,
        majorType: undefined,
        year: undefined,
        phone: undefined,
        openid: undefined
      },
      submitLoading: false,
      rules: {
        // cardCode: [
        //   { required: true, message: '请输入卡号！', trigger: 'change' },
        // ],
        codepwd: [
          { required: true, message: '请输入初始密码！', trigger: 'change' },
        ],
        nickName: [
          { required: true, message: '请输入姓名！', trigger: 'change' },
        ],
        school: [
          { required: true, message: '请输入就读学校名称！', trigger: 'change' },
        ],
        year: [
          { required: true, message: '请选择高考年份！', trigger: 'change' },
        ],
        phone: [
          { required: true, message: '请输入手机号码！', trigger: 'change' },
        ],
        code: [
          { required: true, message: '请输入验证码！', trigger: 'change' },
        ],
      },
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    getSMSCodeByPhone() {
      this.$refs['registersForm'].validateField('phone', (errorMessage) => {
        if (errorMessage) {
          return this.$message.error(errorMessage);
        }
        const TIME_COUNT = 60
        request({
          method: 'POST',
          url: 'sysUser/syan',
          params: {
            phone: this.form.phone
          }
        }).then(res => {
          if (![null, 0].includes(res.code)) {
            return this.$message.error(res.msg);
          }
          if (!this.timers) {
            this.countDown = TIME_COUNT;
            this.timers = setInterval(() => {
              if (this.countDown > 0 && this.countDown <= TIME_COUNT) {
                this.countDown--;
              } else {
                clearInterval(this.timers);
                this.timers = null;
              }
            }, 1000)
          }
          this.$message.success(res.msg);
        })
      })
    },
    submitForm() {
      this.$refs['registersForm'].validate(valid => {
        if (!valid) return
        this.submitLoading = true
        request({
          method: 'POST',
          url: 'sysUser/register',
          data: this.form,
          params: {
            code: this.form.code,         // 验证码
            codepwd: this.form.codepwd    // 初始密码
          }
        }).then(res => {
          if (![0, 200].includes(res.code)) {
            return this.$message.error(res.msg)
          }
          this.$message.success(res.msg)
        }).finally(() => {
          this.submitLoading = false
        })
      })
    },
    gologin() {
      this.$parent.showRegisters = false
    },
  }
}

</script>
<style lang="stylus" scoped>
.tips 
  font-size: 15px;
  margin 15px 0
.modify-button 
  width: 120px

// .modify-form /deep/ 
//   .el-input__inner 
//     width 244px
  
</style>
